iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 28
0
自我挑戰組

JS30自我學習筆記系列 第 28

第二十七堂 - Click and Drag

  • 分享至 

  • xImage
  •  

今天要實作的是一種常見的互動效果,「點擊並拖曳」。大家可以在下面實作範例中操作,按住滑鼠左鍵,將這串數字列表左右移動。

Imgur

邏輯流程

  1. 監聽mousedown事件,抓取點擊時的X及當下的滾輪位置
  2. 監聽mouseup事件,移除效果
  3. 監聽mousemove事件,移除效果,避免滑鼠滑出頁面又回來會認定是mousedown
  4. 監聽mouseleave事件,抓取滑鼠X位置,並設定滾輪位置

課程重點

這次實作的code如下所示,mousedown事件抓取點擊時的X值(e.pageX)及當下的滾輪位置(slider.scrollLeft)。而e.pageX減掉slider.offsetLeft是為了修正div如果有margin造成的偏差。

而mouseleave和mouseup都只是將class移除。

mousemove事件是持續抓取滑鼠位置,並和點擊時的位置做相減,得到位移距離,再將點擊時的滾輪位置減去這段位移,重新指定給滾輪位置,即可完成拖曳功能。

const slider = document.querySelector('.items');
let isDown = false;
let startX;
let scrollLeft;

slider.addEventListener('mousedown', (e) => {
  isDown = true;
  slider.classList.add('active');
  startX = e.pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;
});

slider.addEventListener('mouseleave', () => {
  isDown = false;
  slider.classList.remove('active');
});

slider.addEventListener('mouseup', () => {
  isDown = false;
  slider.classList.remove('active');
});

slider.addEventListener('mousemove', (e) => {
  if (!isDown) return;  // stop the fn from running
  e.preventDefault();
  const x = e.pageX - slider.offsetLeft;
  const walk = (x - startX) * 3;
  slider.scrollLeft = scrollLeft - walk;
});

延伸閱讀

  • mouseleave和mouseout差別:當滑鼠游標離開該元素或是其下任何子元素時,會觸發mouseout。而mouseleave只會在游標離開該元素時觸發。

上一篇
第二十六堂 - Stripe Follow Along Nav
下一篇
第二十八、九堂 - Video Speed Controller & Countdown Timer
系列文
JS30自我學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言